<template>
  <view
    class="form-page"
    :style="{
      paddingBottom: isChat ? '120rpx' : '20rpx',
    }"
  >
    <view
      v-if="enterprise.audit == 2"
      style="font-size: 15px; color: #f44336; padding: 0 0 20rpx 10rpx"
      >{{ '拒绝原因：' + enterprise.failReason }}
    </view>
    <view class="b-w form-item">
      <u--form labelPosition="left" :model="enterprise" :rules="rules" ref="uForm">
        <u-form-item
          v-if="!examining || enterprise.enterpriseName"
          label="企业名称"
          labelWidth="80"
          borderBottom
          prop="enterpriseName"
          ref="item1"
        >
          <u--input
            disabledColor="#ffffff"
            :disabled="examining"
            v-model="enterprise.enterpriseName"
            placeholder="输入企业全称"
            border="none"
          ></u--input>
        </u-form-item>
        <u-form-item
          v-if="!examining || enterprise.enterpriseArea"
          label="企业区域"
          labelWidth="80"
          borderBottom
          prop="enterpriseArea"
        >
          <u--input
            disabledColor="#ffffff"
            :disabled="examining"
            v-model="enterprise.enterpriseArea"
            placeholder="请填写省、市"
            border="none"
          ></u--input>
        </u-form-item>
        <u-form-item
          v-if="!examining || enterprise.enterpriseAddress"
          label="详细地址"
          labelWidth="80"
          borderBottom
          prop="enterpriseAddress"
          ref="item1"
        >
          <u--input
            disabledColor="#ffffff"
            :disabled="examining"
            v-model="enterprise.enterpriseAddress"
            placeholder="请填写详细地址"
            border="none"
          ></u--input>
        </u-form-item>
        <u-form-item
          v-if="!examining || enterprise.enterpriseContacts"
          label="企业联系人"
          labelWidth="80"
          prop="enterpriseContacts"
          borderBottom
          ref="item1"
        >
          <u--input
            disabledColor="#ffffff"
            :disabled="examining"
            v-model="enterprise.enterpriseContacts"
            placeholder="请输入企业联系人"
            border="none"
          ></u--input>
        </u-form-item>
        <u-form-item
          v-if="!examining || enterprise.contactsMobile"
          label="手机号码"
          labelWidth="80"
          prop="contactsMobile"
          borderBottom
          ref="item1"
        >
          <u--input
            disabledColor="#ffffff"
            :disabled="examining"
            v-model="enterprise.contactsMobile"
            placeholder="请输入手机号码"
            maxlength="11"
            border="none"
          ></u--input>
        </u-form-item>
        <u-form-item
          v-if="!examining || enterprise.contactsJob"
          label="联系人职务"
          labelWidth="80"
          borderBottom
          prop="contactsJob"
          ref="item1"
        >
          <u--input
            disabledColor="#ffffff"
            :disabled="examining"
            v-model="enterprise.contactsJob"
            placeholder="请输入联系人职务"
            border="none"
          ></u--input>
        </u-form-item>
        <u-form-item
          v-if="!examining || enterprise.industry"
          label="企业所属产业"
          labelWidth="100"
          prop="industry"
          borderBottom
          ref="item1"
        >
          <js-fun-picker
            :listArr="industryList"
            @click="industryListChange"
            :disabled="examining"
            type="multiple"
          >
            <view class="fun-picker-view">
              <view class="industry-name" v-if="industryListStr">{{ industryListStr }}</view>
              <view v-else>请选择产业</view>
            </view>
          </js-fun-picker>
          <u-icon v-if="!examining" slot="right" name="arrow-right"></u-icon>
          <!-- <u--input
						disabled
						disabledColor="#ffffff"
						placeholder="请输入企业所属企业"
						border="none"
				></u--input> -->
        </u-form-item>
        <u-form-item
          v-if="
            (enterprise.industry && enterprise.industry.includes('其他') && !examining) ||
            enterprise.otherIndustryName
          "
          label="其他产业名称"
          labelWidth="80"
          borderBottom
          prop="otherIndustryName"
          ref="item1"
        >
          <u--input
            v-model="enterprise.otherIndustryName"
            placeholder="请输入其他其他产业名称"
            border="none"
          ></u--input>
        </u-form-item>
        <u-form-item
          v-if="!examining || enterprise.legalPerson"
          label="法定代表人"
          labelWidth="80"
          borderBottom
          prop="legalPerson"
          ref="item1"
        >
          <u--input
            disabledColor="#ffffff"
            :disabled="examining"
            placeholder="请输入法定代表人"
            v-model="enterprise.legalPerson"
            border="none"
          ></u--input>
        </u-form-item>
        <u-form-item
          v-if="!examining || enterprise.registeredCapital"
          label="注册资金(万元)"
          labelWidth="120"
          borderBottom
          prop="registeredCapital"
          ref="item1"
        >
          <u--input
            type="number"
            :disabled="examining"
            v-model="enterprise.registeredCapital"
            disabledColor="#ffffff"
            placeholder="请输入注册资金"
            border="none"
          ></u--input>
        </u-form-item>
        <u-form-item
          v-if="!examining || enterprise.businessLicense.length > 0"
          label="营业执照"
          labelWidth="80"
          prop="businessLicense"
          borderBottom
          ref="item1"
        >
          <view @click="upLoadCompanyImg">
            <u-upload
              name="1"
              disabled
              :fileList="enterprise.businessLicense"
              @delete="deletePic"
              :maxCount="1"
            ></u-upload>
          </view>
        </u-form-item>
      </u--form>
    </view>
    <view
      class="b-w form-item"
      v-if="(!myself && PublishParam.enterprisePublishApplyVoList.length > 0) || !examining"
    >
      <view class="title-demand flex-x-c">
        <view> 企业技术需求 </view>
        <view class="flex-x-c add" @click="addPublishVo" v-if="!examining">
          增加
          <u-icon color="#00b4fd" style="margin-left: 6rpx" size="12" name="plus"></u-icon>
        </view>
      </view>
      <u--form labelPosition="left">
        <template v-for="(item, index) in PublishParam.enterprisePublishApplyVoList">
          <u-form-item :key="index" :label="`需求` + (index + 1)" labelWidth="50" borderBottom>
            <u--textarea
              :disabled="examining"
              v-model="item.content"
              maxlength="150"
              count
              autoHeight
              placeholder="请输入内容"
            ></u--textarea>
            <view
              @click="deletePublishVo(index)"
              style="padding-left: 10rpx"
              slot="right"
              v-if="index > 4 && !examining"
            >
              <u-icon size="24" color="#ff004f" name="minus-circle"></u-icon>
            </view>
          </u-form-item>
        </template>
      </u--form>
      <view class="confirm-btn">
        <template v-if="(myself && enterprise.audit !== 0) || isAdd">
          <u-button type="primary" @click="handleSubmit" text="提交"></u-button>
        </template>
        <template v-if="!myself && enterprise.audit === 0">
          <view style="margin-bottom: 20rpx">
            <u-button type="success" @click="handleExamining" text="审核通过"></u-button>
          </view>
          <u-button type="error" @click="handleRefuse" text="审核拒绝"></u-button>
        </template>
      </view>
    </view>
    <public-confirm
      ref="confirm"
      message="确认审核通过"
      :confShow="examiningConfirmShow"
      @confirm="handleExaminingPass"
      @cancel="handleExaminingCancel"
    ></public-confirm>
    <order-remark-pop ref="remarkPop" @remarkComfirn="remarkComfirn"></order-remark-pop>
    <view class="foot-bar flex-x-c" v-if="isChat">
      <view class="flex-y-c item-left" @click="goChat">
        <u-icon class="tags-icon" size="25" name="chat"></u-icon>
        <view class="f24">留言</view>
      </view>
    </view>
  </view>
</template>

<script>
import orderRemarkPop from './components/orderRemarkPop'
import UpLoadImg from '@/ext/upLoadImg.js'
import jsFunPicker from '@/components/jsfun-picker/jsfun-picker.vue'
export default {
  components: { jsFunPicker, orderRemarkPop },
  data() {
    return {
      isAdd: false,
      enterprise: {
        enterpriseName: '',
        enterpriseArea: '',
        enterpriseAddress: '',
        enterpriseContacts: '',
        contactsJob: '',
        contactsMobile: '',
        otherIndustryName: '',
        industry: [],
        legalPerson: '',
        registeredCapital: '',
        businessLicense: [],
      },
      industryListStr: '',
      PublishParam: {
        enterprisePublishApplyVoList: [
          { content: '' },
          { content: '' },
          { content: '' },
          { content: '' },
          { content: '' },
        ],
      },
      rules: {
        enterpriseName: {
          type: 'string',
          required: true,
          message: '请填写企业名称',
          trigger: ['blur', 'change'],
        },
        enterpriseArea: {
          type: 'string',
          required: true,
          message: '请填写企业所属区域',
          trigger: ['blur', 'change'],
        },
        enterpriseAddress: {
          type: 'string',
          required: true,
          message: '请填写企详细地址',
          trigger: ['blur', 'change'],
        },
        enterpriseContacts: {
          type: 'string',
          required: true,
          message: '请填写企业联系人',
          trigger: ['blur', 'change'],
        },
        contactsJob: {
          type: 'string',
          required: true,
          message: '联系人职务',
          trigger: ['blur', 'change'],
        },
        otherIndustryName: {
          type: 'string',
          required: true,
          message: '请输入行业名称',
          trigger: ['blur', 'change'],
        },
        contactsMobile: {
          validator: (rule, value, callback) => {
            if (!value) return callback('请输入联系人手机号')
            if (!this.$utils.isPhoneNumber(value)) return callback('请输入正确的手机号')
            return callback()
          },
          trigger: ['blur'],
        },
        industry: {
          validator: (rule, value, callback) => {
            return value.length ? true : false
          },
          message: '请选择产业',
          trigger: ['blur', 'change'],
        },
        legalPerson: {
          type: 'string',
          required: true,
          message: '请输入法定代表人',
          trigger: ['blur', 'change'],
        },
        registeredCapital: {
          type: 'number',
          required: true,
          message: '请输入注册资金',
          trigger: ['blur', 'change'],
        },
        businessLicense: {
          validator: (rule, value, callback) => {
            return value.length ? true : false
          },
          message: '请上传营业执照',
          trigger: ['blur', 'change'],
        },
      },
      uxText: '我的天',
      fileList: [],
      selectIndustryList: '',
      industryList: [
        '农业',
        '林业',
        '牧业',
        '渔业',
        '采矿业',
        '制造业',
        '电力',
        '热力',
        '燃气',
        '交通运输',
        '仓储',
        '邮政业',
        '信息传输',
        '建筑业',
        '软件',
        '信息技术',
        '其他',
      ],
      examiningConfirmShow: false,
      examining: false,
      examiningId: '',
      myself: false,
      roleId: 0,
      isChat: false,
    }
  },
  onLoad(options) {
    this.isAdd = options.isAdd && true
    this.roleId = options.id
    if (options.examineId) {
      this.myself = options.myself ? true : false
      uni.setNavigationBarTitle({ title: options.myself ? '企业信息' : '审核详情' })
      this.examiningId = options.examineId
      this.queryExaminingOrder(this.examiningId, 1)
    } else if (options.userId) {
      this.isChat = true
      uni.setNavigationBarTitle({ title: '企业详情' })
      this.examining = true
      this.examiningId = options.userId
      this.queryExaminingOrder(this.examiningId, 2)
    }
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules)
  },
  onShow() {
    this.upLoad = new UpLoadImg()
  },
  methods: {
    queryExaminingOrder(examiningId, type) {
      let url = type === 2 ? '/user/userInfo' : '/roleApply/roleApplyInfo'
      const param = type === 2 ? { userId: examiningId } : { id: examiningId }
      this.$request(url, param).then((res) => {
        const enterpriseApply = res.result.enterpriseApply || res.result.enterpriseApplyVo
        const enterprisePublishApplyList = res.result.enterprisePublishApplyList || []
        this.examining = this.myself ? (enterpriseApply.audit === 0 ? true : false) : true
        this.enterprise = Object.assign(this.enterprise, enterpriseApply)
        this.enterprise.industry = this.enterprise.industry.split(',')
        if (!this.examining && this.enterprise.industry.includes('其他')) {
          this.enterprise.otherIndustryName = this.enterprise.industry[0]
          this.enterprise.industry.shift()
        }
        this.enterprise.businessLicense = enterpriseApply.businessLicense
          ? [
              {
                url: enterpriseApply.businessLicense,
                status: 'success',
              },
            ]
          : []
        this.industryListStr = this.enterprise.industry.join(',')
        this.PublishParam.enterprisePublishApplyVoList = enterprisePublishApplyList.map((res) => {
          return {
            content: res.content,
          }
        })
      })
    },
    industryListChange(e) {
      this.enterprise.industry = e.list
      this.industryListStr = e.textStr || ''
    },
    upLoadCompanyImg() {
      if (this.examining) return
      this.upLoad.getOssToken().then((res) => {
        this.enterprise.businessLicense = [
          {
            url: res.fileName,
            status: 'success',
          },
        ]
      })
    },
    handleExamining() {
      this.examiningConfirmShow = true
    },
    handleExaminingPass() {
      this.$request('/roleApply/auditRoleApply', {
        audit: 1,
        id: this.examiningId,
      }).then((res) => {
        this.examiningConfirmShow = false
        this.$utils.toast('审核已通过')
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
      })
    },
    remarkComfirn(param) {
      this.$request('/roleApply/auditRoleApply', {
        audit: 2,
        failReason: param.custRemark,
        id: this.examiningId,
      }).then((res) => {
        this.$utils.toast('审核已拒绝')
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
      })
    },
    handleRefuse() {
      this.$refs.remarkPop.showPop()
    },
    handleExaminingCancel() {
      this.examiningConfirmShow = false
    },
    deletePic() {
      if (this.examining) return
      this.enterprise.businessLicense = []
    },
    addPublishVo() {
      this.PublishParam.enterprisePublishApplyVoList.push({ content: '' })
    },
    deletePublishVo(index) {
      this.PublishParam.enterprisePublishApplyVoList.splice(index, 1)
    },
    handleSubmit() {
      this.$refs.uForm.validate().then((res) => {
        const PublishParam = []
        this.PublishParam.enterprisePublishApplyVoList.forEach((vol) => {
          if (vol.content) PublishParam.push(vol)
        })
        if (PublishParam.length < 5) return this.$utils.toast('至少输入5条技术需求')
        const enterprise = this.$utils.deepCopy(this.enterprise)
        enterprise.businessLicense = enterprise.businessLicense[0].url
        if (enterprise.otherIndustryName) enterprise.industry.unshift(enterprise.otherIndustryName)
        enterprise.industry = enterprise.industry.join(',')
        delete enterprise.otherIndustryName
        this.$request('/roleApply/roleApply', {
          roleId: this.roleId || 4,
          enterpriseApplyVo: enterprise,
          enterprisePublishApplyVoList: PublishParam,
        }).then((res) => {
          this.$utils.toast('认证已提交审核')
          setTimeout(() => {
            uni.navigateBack({})
          }, 1000)
        })
      })
    },
    goChat() {
      // uni.setStorageSync('chatUser', {
      //   id: this.detail.userId,
      //   name: this.detail.enterpriseName,
      //   avatar: this.detail.avatar || '',
      // })
      this.$routeUtils.navigateTo({
        url: `/pages/new/sendMsg?id=${this.examiningId}&name=${this.enterprise.enterpriseName}`,
      })
    },
  },
}
</script>

<style scoped lang="scss">
.form-page {
  padding: 0 20rpx;
  padding-top: 20rpx;
  padding-bottom: calc(110rpx + env(safe-area-inset-bottom));
}
.form-item {
  border-radius: 10rpx;
  padding: 0 20rpx;
  padding-bottom: 20rpx;
}
.input-place {
  font-size: 15px;
  color: rgb(192, 196, 204);
}
.fun-picker-view {
  color: rgb(192, 196, 204);
  width: 300rpx;
  font-size: 15px;
}
.title-demand {
  font-size: 15px;
  font-weight: 500;
  padding: 20rpx 0rpx;
  justify-content: space-between;
}
.add {
  font-size: 13px;
  color: #00b4fd;
}
.industry-name {
  color: #333;
}
.foot-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9;
  background-color: #fff;
  padding-top: 10rpx;
  padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
  justify-content: space-between;
  .btn {
    display: inline-flex;
    margin-right: 20rpx;
  }
  .item-left {
    padding: 0 30rpx;
  }
}
</style>
